<template>
  <div>
    <el-card>
      <el-descriptions class="myLicense" :column="1" size="mini" border :labelStyle="{
        'text-align': 'right',
        width: '130px',
        'font-weight': 'bold',
      }">
        <el-descriptions-item label="机器识别码">{{
          datainfo.hardware_code
        }}</el-descriptions-item>
        <el-descriptions-item label="使用时长(-1不限制)">{{
          datainfo.limit_hours
        }}</el-descriptions-item>
        <el-descriptions-item label="允许接入的网关数量">{{
          datainfo.max_gateways
        }}</el-descriptions-item>
        <el-descriptions-item label="允许的总点数">{{
          datainfo.max_data_count
        }}</el-descriptions-item>
        <el-descriptions-item label="授权描述">{{
          datainfo.desc
        }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{
          datainfo.update_time
        }}</el-descriptions-item>
        <el-descriptions-item label="系统启动时间">{{
          datainfo.start_time
        }}</el-descriptions-item>
        <el-descriptions-item label="授权状态">
          <el-tag disable-transitions effect="dark" size="small" :type="datainfo.verify == 1 ? 'success' : 'danger'">{{
            datainfo.verify == 0 ? "错误" : "正确" }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="授权码">
          <el-input type="textarea" disabled autosize placeholder="请输入内容" v-model="datainfo.license">
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-left: 25%">
        <el-button type="primary" size="mini" @click="codeClick()">更新授权</el-button>
      </div>

      <!-- <el-descriptions class="myLicense" title="系统升级日志" :column="1" size="mini" border :labelStyle="{
        'text-align': 'right',
        width: '130px',
        'font-weight': 'bold',
      }"> -->
      <el-form style="width:50%">
        <el-form-item label="版本升级日志"><el-input type="textarea" v-model="version" resize="none" :rows="12" :readonly="true"
            ></el-input></el-form-item>
      </el-form>


      <!-- </el-descriptions> -->
    </el-card>
    <!-- 修改系统参数信息 -->
    <el-dialog title="修改授权码" :visible.sync="editCodeDialogVisible" width="50%" :close-on-click-modal="false">
      <el-form ref="editCodeForm" :model="editCodeFromData" label-width="90px">
        <el-form-item label="机器识别码">
          <el-input v-model="editCodeFromData.hardware_code" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="授权码">
          <el-input type="textarea" v-model="editCodeFromData.license" placeholder="输入空的保存则表示删除" clearable
            autosize></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editCodeDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="editCodeConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  name: "LicenseCode",
  data() {
    return {
      editCodeDialogVisible: false,
      datainfo: {
        hardware_code: "",
        license: "",
        limit_hours: "",
        max_gateways: "",
        max_data_count: "",
        desc: "",
        update_time: "",
        verify: "",
      },
      version: "",
      editCodeFromData: {
        hardware_code: "",
        license: "",
      },
    };
  },
  //计算属性
  computed: {},
  //监听data中数据变化
  watch: {},
  //方法集合
  methods: {
    codeClick() {
      this.editCodeDialogVisible = true;
      this.editCodeFromData.hardware_code = this.datainfo.hardware_code;
      this.editCodeFromData.license = this.datainfo.license;
    },
    editCodeConfirm() {
      this.$refs.editCodeForm.validate(async (vail) => {
        if (!vail) {
          return false;
        }
        let newMsg = {
          webMsgType: 1023,
          funCode: 1,
        };
        newMsg.data = { license: this.editCodeFromData.license };
        publishMsg(newMsg);
        this.editCodeDialogVisible = false;
      });
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1023:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.datainfo = msg.data;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("更新授权码信息成功!");
                }
              } else {
                console.log("checkSpecialId false");
              }
              break;
            case 2:
              this.version = msg.data.version;
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  created() { }, //生命周期 - 创建完成
  mounted() {
    setMessageCallback(this.onMessage);
    //console.log("当前客户端页面请求消息");
    publishMsg({
      webMsgType: 1023,
      funCode: 0,
    });

    publishMsg({
      webMsgType: 1023,
      funCode: 2,
    });

  }, //生命周期 - 挂载完成
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}

::v-deep .myLicense {
  width: 50%;
}
</style>